<template>
	<view style="background-color: #efeff4;" class="productsLists">
		
		<view class="lists">

			<view @click="toDetail(item.goods_id)" class="product" v-for="(item,index) in lis" :key="index">
				<view v-if="item.promotion_type == 'groupbuy'" class="zk">抢购 </view>
				<view v-if="item.promotion_type == 'xianshi'" class="zk">限时折扣</view>
				<view v-if="item.promotion_type == 'miaosha'" class="zk">秒杀</view>
				<view v-if="item.promotion_type == 'zhijiang'" class="zk">直降</view>
				<view v-if="item.promotion_type == 'teijia'" class="zk">特价</view>
				<view v-if="item.promotion_type == 'repur'" class="zk">满额加价购</view>
				<view v-if="item.promotion_type == 'spellgroup'" class="zk">拼团</view>				
				<view v-if="item.promotion_type == 'bargain'" class="zk">砍价</view>
				<image :src="item.goods_image_url" mode=""></image>
				<view class="ms"><text class="is_tv" v-if="item.is_tv==1">自营</text>{{item.goods_name}}</view>
				<view style="display: flex;justify-content: space-between;" class="lastLine">
					<text class="lastLine1">￥{{item.goods_price}}</text>
					<text> 
						<text class="lastLine2">销量：{{item.goods_salenum}}</text>
						<!-- <text @click="toStore(item.store_id)" class="lastLine3">进店</text> -->
					 </text>
				</view>
			</view>
			
			
			
			<view @tap="hidden()" v-if="flag1" @touchmove.stop.prevent="moveHandle" class="sxMask">
				<view @tap.stop class="innerMask">
					<!-- <view class="innerMaskTop">
						<text>筛选<image class="sx" src="../../static/images/sx.jpg" mode=""></image></text>
					</view> -->
					<!-- <view class="innerMaskCenter"> -->
						 <scroll-view scroll-y="true" class="innerMaskCenter">
						<view v-for="(item,index11) in attr_list" :key="index11">
							<view class="innerMaskCenterT mt">
								<text class="fl fs18 bold">{{item.name}}</text>
							</view>
							<view class="pplis" >
								<text :class="{'active1':checkGoods[index11] == item2.attr_value_id}"  v-for="(item2,index3) in item.value" 
								@click="activeColor3(index11,index3)":key="index3"  
								class="ppli">{{item2.attr_value_name}}</text>							
							</view>
						</view>
						
						<view style="" class="innerMaskCenterT mt">
							<text class="fl fs18 bold">品牌</text>
							<!-- <text class="fr fs18 C999">全部<image class="xj" src="../../static/images/xj.jpg" mode=""></image></text> -->
						</view>
						<view style="" class="ppfllis">
							<text :class="[(active2 == index) ? 'active1':'']" 
							@click="activeColor2(index,item.brand_id)" v-for="(item,index) in brand_list" :key="index" 
							class="ppflli">
									{{item.brand_name}}
							</text>			
						</view>
						</scroll-view>
					<!-- </view> -->
					<view class="innerMaskBottom">
						<button @click="reset()" class="fl innerMaskBottom1">重置</button>
						<button @click="ok()" class="fr innerMaskBottom2">确定</button>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="" v-if="lis.length<=0">
			<image :src="`${picUrl}/InfoNull.png`" style="width: 750rpx;" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				voucher_t_id:'',
				key:"",
				order:"",
				brand_list:[],
				goods_spec:[],
				checkGoods:[],
				attr_list:[],
				curpage:1,
				hasmore:false,
				priceRange:[],
				PPID:"",
				searchValue:'',
				keyword:"",
				firstid:"",
				secondid:"",
				thirdid:"",
				active1:0,
				active3:0,
				active2:0,
				flag1:false,
				flag01:true,
				xlNum:0,
				jgNum:0,
				flag11:true,
				flag12:false,
				flag13:false,
				flag21:true,
				flag22:false,
				flag23:false,
				pplis:[],
				pplisLong:16,
				minPrice:0,
				maxPrice:100,
				pinpaiId:'',
				ppfllis:[],
				lis:[]
			}
		},	
			onReachBottom() {
				var that=this
				if(this.hasmore){
					this.curpage++
					// this.getLis()
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_voucher',
						method: 'get',
						data: {
							// "key":this.key,
							// "order":this.order,
							// "curpage":this.curpage,
							// "b_id":this.PPID,
							// "gc_id":this.thirdid
							// "keyword":this.keyword
						},
					}).then(function(res) {		
						that.hasmore=res.datas.paged.hasmore
						that.lis=that.lis.concat(res.datas.goods_list);
						that.priceRange=res.datas.attr_list[0].value
					})
				}else{
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
				}
			},
		onLoad(options) {
			this.voucher_t_id = options.voucher_t_id
			this.PPID=options.PPID;
			if(this.PPID == undefined){
				this.PPID=0
			}
			var title=options.index
			if(title == 'null' || title == undefined){
				title=" "
			}
			this.keyword=options.index;
			this.firstid=options.firstid;
			this.secondid=options.secondid;
			this.thirdid=options.thirdid;
			this.getLis()
			// uni.setNavigationBarTitle({
			//     title: title||"商品列表"
			// });
		},

		methods: {
			toStore(id){
				uni.navigateTo({
					url:"/mall/store/store?store_id="+id
				})
			},
			ok(){		
				var that=this;
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_list',
					method: 'get',
					data: {
						// "b_id":that.pinpaiId,
						// "keyword":that.keyword,
						// "class_id":that.thirdid,
						"b_id":that.PPID,
						"gc_id":that.thirdid,
						"price_from":that.minPrice,
						"price_to":that.maxPrice						
					},
				}).then(function(res) {					
					that.lis=res.datas.goods_list;
					that.flag1=false;
					if(res.datas.goods_list.length == 0){
						uni.showToast({
							title:"没有筛选结果",
							icon:"none"
						})				
					}
				})
			},
			reset(){
				// this.pinpaiId="";
				this.minPrice="";
				this.maxPrice="";
				this.active2=""
				this.active1=""	
			},
			sortBox(){
				this.flag1=!this.flag1;
				var that=this
				//品牌列表
				this.$util.request({
					url: '/mobile/index.php?act=brand&op=list',
					method: 'get',
					data: {
						"class_id":that.thirdid
					},
				}).then(function(res) {					
					console.log(res)
					that.pplis=res.datas
				
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+id
					
				})
			},
			getLis(){
				var that=this	
				if(!this.PPID){
					this.PPID=0
				}
				if(!this.thirdid){
					this.thirdid=0
				}
				
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=voucher_goodslist',
					method: 'get',
					data: {
                        voucher_t_id:that.voucher_t_id
						// "keyword":this.keyword
					},
				}).then(function(res) {	
					if(res.error_code == 0){
						that.lis=res.datas.goods_list;
						if(that.lis.length == 0){
							uni.showToast({
								title:"数据为空",
								icon:"none"
							})
						}
						that.attr_list=res.datas.attr_list
						for(let i=0;i<res.datas.brand_list.length;i++){
							that.brand_list=that.brand_list.concat(res.datas.brand_list[i])
						}
						that.priceRange=res.datas.attr_list[0].value
						that.attr_list.map((item,index)=>{
							that.goods_spec.push([])
							item.value.map(arr=>{
								that.goods_spec[index].push(arr.attr_value_id)
							})
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					
				
				})
			},
			// 缺少三级分类接口
			getProducts(){	
				var that=this
				this.$util.request({
					url: '/mobile/index.php?act=goods_class&op=getAllClass',
					method: 'get',
					data: {},
				}).then(function(res) {		
					var aa=res.datas.goods_class
					for(var i=0;i<aa.length;i++){
						if(aa[i].gc_id=that.firstid){
							var bb=aa[i].class2;
							for(var j=0;j<bb.length;j++){
								if(bb[j].gc_id=that.secondid){																		
									var cc=bb[j].class3
									console.log(cc)
								}
							}
						}
					}
				})		
			},
			activeColor(index,id){
				this.pinpaiId=id
				this.active1=index				
			},
			activeColor2(index,id){
				this.active2=index	
				this.PPID=id
			},
			activeColor3(index1,index2){
				this.checkGoods.splice(index1,1,this.goods_spec[index1][index2])
				// console.log(index)
				// this.active3=index	
				// if(id == 1){
				// 	this.minPrice=0
				// 	this.maxPrice=100
				// }
				// if(id == 2){
				// 	this.minPrice=101
				// 	this.maxPrice=200
				// }
				// if(id == 3){
				// 	this.minPrice=201
				// 	this.maxPrice=300
				// }
				// if(id == 4){
				// 	this.minPrice=301
				// 	this.maxPrice=500
				// }
				// if(id == 5){
				// 	this.minPrice=501
				// 	this.maxPrice=800
				// }
				// if(id == 6){
				// 	this.minPrice=801
				// 	this.maxPrice=1000
				// }
				// if(id == 7){
				// 	this.minPrice=1000
				// 	this.maxPrice=9999999999999999999999999999999999999999999999999
				// }
					
					
			},
			hidden(){
				this.flag1=!this.flag1
			},
			sortType(index){
				this.curpage=1
				var that=this
				if(index == 0){
					this.flag01=true
					this.flag11=true;
					this.flag12=false;
					this.flag13=false;
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.key=4
					this.order=1
					
					this.$util.request({
						url: '/mobile/index.php?act=goods&op=goods_list',
						method: 'get',
						data: {								
							"b_id":that.PPID,
							"gc_id":that.thirdid,
							"key":"4",
							"order":"1"
							// "keyword":that.keyword
						},
					}).then(function(res) {
						that.lis=res.datas.goods_list
						that.hasmore=res.datas.paged.hasmore
					})
				}
				if(index == 1){
					this.flag01=false
					this.flag21=true;
					this.flag22=false;
					this.flag23=false;
					this.xlNum++;

					if(this.xlNum%2==0){
						console.log("销量升序");
						this.flag11=false;
						this.flag12=true;
						this.flag13=false;
						this.key=1
						this.order=1
						this.$util.request({
							url: '/mobile/index.php?act=goods&op=goods_list',
							method: 'get',
							data: {		
								"b_id":that.PPID,
								"gc_id":that.thirdid,
								"key":"1",
								"order":"1"
								// "keyword":that.keyword
							},
						}).then(function(res) {
							that.lis=res.datas.goods_list
							that.hasmore=res.datas.paged.hasmore
						})
						
					}
					if(this.xlNum%2==1){
						console.log("销量降序");
						this.flag11=false;
						this.flag12=false;
						this.flag13=true;
						this.key=1
						this.order=0
						this.$util.request({
							url: '/mobile/index.php?act=goods&op=goods_list',
							method: 'get',
							data: {		
								"b_id":that.PPID,
								"gc_id":that.thirdid,
								"key":"1",
								"order":"0"
								// "keyword":that.keyword
							},
						}).then(function(res) {
							that.lis=res.datas.goods_list
							that.hasmore=res.datas.paged.hasmore
						})
					}										
				}
				if(index == 2){
					this.flag01=false
					this.flag11=true;
					this.flag12=false;
					this.flag13=false;					
					this.jgNum++;

					if(this.jgNum%2==0){
						console.log("价格升序");
						this.flag21=false;
						this.flag22=true;
						this.flag23=false;
						this.key=3
						this.order=1
						this.$util.request({
							url: '/mobile/index.php?act=goods&op=goods_list',
							method: 'get',
							data: {	
								"b_id":that.PPID,
								"gc_id":that.thirdid,
								"key":"3",
								"order":"1"
								// "keyword":that.keyword
							},
						}).then(function(res) {
							that.hasmore=res.datas.paged.hasmore
							that.lis=res.datas.goods_list;
						})
					}
					if(this.jgNum%2==1){
						console.log("价格降序");
						this.flag21=false;
						this.flag22=false;
						this.flag23=true;
						this.key=3
						this.order=0
						this.$util.request({
							url: '/mobile/index.php?act=goods&op=goods_list',
							method: 'get',
							data: {		
								"b_id":that.PPID,
								"gc_id":that.thirdid,
								"key":"3",
								"order":"0"
								// "keyword":that.keyword
							},
						}).then(function(res) {
							that.hasmore=res.datas.paged.hasmore
							that.lis=res.datas.goods_list
							console.log(that.lis)
						})
					}										
				}
			}
			
			

		}
	}
</script>

<style>
	uni-page-body {
		background-color: #efeff4;
		color: rgb(102, 102, 102);
	}
	page{
		background-color: #efeff4;
	}
	.top{
		border-top: 3px #f5f5f5 solid;
		background-color: #FFFFFF;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32upx;
	}
	.top>view{
		height: 80upx;
		line-height: 80upx;
		/* font-size: 21upx; */
		font-size:30upx;
	}
	.top image{
		width: 35upx;
		height: 35upx;
	}
	.fe0000{
		color: #ff4300;
	}
	.sjx{
		position: relative;
		top: 8upx;
		width: 30upx;
		height: 30upx;
	}
	.lists{
		background-color: #efeff4;
		/* height: 100vh; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 21upx;
		/* height: 100%; */
		/* min-height: 100vh; */
		
	}
	.product{
		position: relative;
		box-sizing: border-box;
		text-align: center;
		border-radius: 10upx;
		margin-bottom: 21upx;
		width: 350upx;
		height: 488upx;
		background-color: #fff;
		padding-top: 10upx;

	}
	.product image{
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;		
		width: 326upx;
		height: 326upx;
		margin: 0 auto;
	}
	.zk{
		/* width: 80upx; */
		padding: 0 15upx;
		height: 40upx;
		background-color:#ff4300;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		border-top-left-radius: 10upx;		
	}
	.ms{
		min-height: 64upx;
		text-align: left;
		color: black;
		padding:0 12upx;
		line-height: 35upx;
		/* font-size: 18upx; */
		font-size: 27upx;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;		
	}
	.lastLine{		
		height: 30upx;
		line-height: 30upx;
		margin-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 5px;
		padding-top: 10upx;
	}
	.lastLine1{		
		color: #ff4300;
		font-size: 30upx	
		/* font-size: 21upx	 */
	}
	.lastLine2{
		color: #000000;
		font-size: 20upx
		/* font-size: 12upx */
	}
	.lastLine3{
		padding: 0upx 10upx;
		padding-left: 20upx;
		color: #000000;
		font-size:27upx
		/* font-size: 18upx */
	}
	
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 30upx
		/* font-size: 21upx */
	}
	.innerMaskCenter{
		overflow-y: scroll;
		height: 1000upx;
		width: 100%;
		position: relative;
	    z-index: 99999999999999999;
	}
	.innerMaskCenterT{
		height: 80upx;
		line-height: 80upx;
		padding: 0 28upx;
	}
	.bold{
		font-weight: bold;
	}
	.C999{
		color: #999999;
	}
	.C333{
		color: #333333;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.fs18{
		font-size: 18upx;
	}
	.fs21{
		font-size: 21upx
	}
	.pplis{
		display: flex;
		padding: 0 28upx;
		flex-wrap: wrap;
	}
	.ppli{
		margin-top: 20upx;
		margin-top: 20upx;
		padding: 5upx 60upx;
		/* font-size: 18upx; */
		font-size: 27upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.ppli+.ppli{
		margin-left: 20upx;
	}
	.ppfllis{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 28upx;
		flex-wrap: wrap;
		border-radius: 15upx;
		overflow: scroll;
	}
	.ppflli{
		margin-top: 20upx;
		padding: 5upx 30upx;
		/* font-size: 18upx; */
		font-size: 27upx;
		background-color: #f0f2f5;
		border-radius: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{

		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	
	.jgInput{
		padding-left: 28upx;
		display: flex;
		flex-direction: row;
	}
	.jgInput input{
		border: none;
		border-radius: 5upx;
		text-align: center;
		background-color: #f0f2f5;
		width: 162upx;
		height: 43upx;
	}
	.inputC{
		position: relative;
		top: -5upx;
		padding: 0 15upx;
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.xj{
		width: 20upx;
		height: 20upx;
		position: relative;
		top: 2upx;
		left: 5upx;
	}
	.mt{
		margin-top: 20upx;
	}
	.active1{
		color: #fff;
		background-color: #ff4300;
	}
	.active2{
		color: #fff;
		background-color: #ff4300;
	}
	.active3{
		color: #fff;
		background-color: #ff4300;
	}
	.active11{
		color: #ff4300;
	}
	
	
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */ 
	}
	.is_tv{
		background-color: #ff4300;
		color: #FFFFFF;
		padding: 0 5rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
</style>
